@borderColor: #eaeaea; // 边框颜色
@navFontColor: #999; // 文字颜色
@navBgColor: #000; // 背景
@aHoverColor: #fff; // 鼠标移入背景颜色
@aHoverFontColor: #ff1132; // 鼠标移入字体颜色
.head {
	position: relative;
	background: @aHoverColor;
	height: 100px;
	.warper {
		height: 100%;
	}
	img {
		/*logo*/
		position: absolute;
		top: 0;
		bottom: 0;

		height: 65px;
		margin: auto 0;
	}
	.search {
		/*search*/
		position: relative;
		float: right;
		top: 50%;
		right: 186px;

		width: 400px;
		padding: 6px 39px 6px 30px;

		border: 2px solid @aHoverFontColor;
		border-radius: 24px;
		background-color: @aHoverColor;

		transform: translate(0, -50%);
		input {
			width: 380px;
			line-height: 24px;
			border: none;
			&::placeholder {
				font-size: 12px;
				font-style: italic;
			}
		}
		i {
			position: absolute;

			left: 8px;
			width: 14px;
			height: 14px;
			top: 0;
			bottom: 0;
			margin: auto 0;

			background: url(../img/sprite.png) no-repeat -466px -667px;
		}
		span {
			position: absolute;
			top: -2px;
			right: -2px;
			width: 60px;
			height: 40px;

			background: url('../img/search.png') no-repeat center @aHoverFontColor;
			background-size: 20px;
			border-radius: 40px;
		}
	}
	.chart {
		/*chart*/
		position: relative;
		float: right;
		top: 50%;
		right: 76px;
		width: 110px;
		height: 40px;

		border: 1px solid @aHoverFontColor;
		border-radius: 40px;
		transform: translate(0, -50%);
		transition: background-color 0.3s;
		&:hover {
			background-color: #fff4f5;
		}
		span {
			display: inline-block;
			width: 48px;
			margin-left: 50px;
			line-height: 40px;
		}
		i {
			display: inline-block;
			position: absolute;
			top: 50%;
			transform: translate(0, -50%);
			width: 20px;
			height: 20px;
			margin-left: 20px;
			background: url(../img/chart.png) no-repeat;
			background-size: 100%;
		}
	}
}
